<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>背景图片与透明玻璃效果</title>  
<link rel="stylesheet" href="/css/bootstrap.min.css">  
</head>  
<style type="text/css">
	body, html {  
	    height: 100%;  
	    margin: 0;  
	}  
	  
	.background {  
	    /* 设置背景图片 */  
	    background-image: url('/image/1.jpg'); /* 替换为你的图片URL */  
	    background-size: cover; /* 确保图片覆盖整个元素 */  
	    background-position: center; /* 图片居中显示 */  
	    height: 100vh; /* 设置为视口高度 */  
	    display: flex;  
	    justify-content: center; /* 水平居中子元素 */  
	    align-items: center; /* 垂直居中子元素 */  
	}  
	  
	.glassy-rectangle {  
	    width: 1200px;  
	    height: 700px;  
	    border-radius: 16px; /* 设置圆角 */  
	    background: rgba(255, 255, 255, 0.263); /* 半透明白色背景 */  
	     
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选，添加阴影增加立体感 */  
	    position: relative; /* 相对于其最近的定位祖先元素（在此例中为.background）进行定位 */  
	    z-index: 1; /* 确保它位于背景之上 */  
        box-shadow: 9px,9px,42px,0 rgba(0.47, 0.47, 0.47, 0.47)
	}  
	  
	/* 如果需要支持旧版浏览器，可以添加一个备选样式 */  
	.glassy-rectangle.no-backdrop-filter {  
	    background: rgba(255, 255, 255, 0.5); /* 更不透明的背景作为备选 */  
	}
</style>
<body>  
<div class="background">  
    <div class="glassy-rectangle row">
        <div class="col-3" style="margin-top: 20px;">&nbsp;&nbsp;&nbsp;<img src="/image/3.png"> 
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;吃不饱食堂</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;用户界面</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;厨师排行</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;菜品管理</h3>
        <h3 style="font-size: 30px; margin-top: 70px;">&nbsp;&nbsp;&nbsp;管理员登陆</h3>
        </div>
        <div class="col-6 row d-flex justify-content-center">
            <div>
                <h1 class="" style="margin-left: 168px; margin-top: 50px; font-family:宋体 ; font-size: 50px;">优秀员工</h1>
            </div>
                
             <div style="margin-left: 390px;"><img class="img-fluid" style="height: 180px; width: 150px;"  src="/image/厨师1.jpg"></div> 
                
           
                <div style=" margin-top: 50px;">
                    <img class="img-fluid" style="height: 180px; width: 150px;" src="/image/厨师三.jpg ">
                    
                </div>
                <div  style="margin-left: 800px; margin-top: -220px;">
                    <img class="img-fluid" style="height: 180px; width: 150px;" src="/image/厨师二.jpg">
                </div>
           
          
        </div>
        <div class="col-3 container">
           
                <h1 style="font-size: 16px; margin-top: 60px;">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 反馈中心</h1>
                
           
           <div class="row d-flex justify-content-center mt-5">
                <div class="border border-0 rounded-circle " style="height: 200px;width: 200px;">
                <img src="/image/5.jpg" class="img-fluid rounded-circle ">
            </div>
                <div class="container d-flex justify-content-between mt-3">
                    <button type="submit" class="btn btn-info p-2" style="width: 100px;">登录</button>
                    <button type="submit" class="btn btn-info p-2" style="width: 100px;">注册</button>
                </div>
            </div>
            <div class="row d-flex justify-content-center mt-5">
                <div class="list-group " style="width: 260px;">
                    <h2 href="#" class="list-group-item list-group-item-action d-flex justify-content-center" style="font-family:宋体"><strong>今日上新</strong></h2>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-center">土豆牛肉</a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-center">麻辣鱼</a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-center">红烧肉</a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-center"></a>
                </div>
            </div>
        </div>
            
        </div>
    </div>  
</div>  
</body>  
</html>